<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录页面</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <style>
        ul>li{
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div>
        <h2>用户登录：</h2>
        <form>
            <ul>
                <li>用户名：</li>
                <li><input type="text" name="username" id="usernameId"></li>
                <li>密码：</li>
                <li><input type="password" name="password" id="passwordId"></li>
<!--                <li><input type="button" value="Login" onclick="doLogin()"></li>-->
<!--                <li><input type="button" value="Login" onclick="doAjaxLogin()"></li>-->
                <li><input type="button" value="Login" onclick="doJQueryAjaxLogin()"></li>
            </ul>
        </form>
    </div>
</body>
<script>
    //1.非Ajax原生访问，同步访问，只有一个主线程
    function doLogin(){
        // debugger
        let username=document.forms[0].username.value;
        let password=document.forms[0].password.value;
        console.log("username",username);
        console.log("password",password);
        // let url="http://localhost/user/login/"+username+"/"+password;
        let url=`http://localhost/user/login/${username}/${password}`;
        console.log(location.href);
        location.href=url;
    }
    // 2.原生Ajax
    function doAjaxLogin() {//Ajax技术的入口对象XmlHttpRequest对象
        let username=document.forms[0].username.value;
        let password=document.forms[0].password.value;
        let url=`http://localhost/user/login/${username}/${password}`;//反单引号
        //创建XmlHttpRequest对象
        let xhr=new XMLHttpRequest();
        // 建立连接
        xhr.open("GET",url,true);//true表示异步(启动新线程与服务端通信)
        xhr.onreadystatechange = function(){
            if (xhr.readyState==4 && xhr.status==200){
                // alert(xhr.responseText);

                let jsonObj=JSON.parse(xhr.responseText);
                console.log(jsonObj);
                alert(jsonObj.message);
            }
        }
        //发送请求
        xhr.send();//get请求的send方法不传任何内容或者传null
        //说明：
        //ajax最大的优势：按需异步请求，局部刷新，提高响应速度
        //ajax最大的劣势：不能直接跨域访问
    }
    //3.JQuery方式的ajax请求，定义了封装ajax操作的相关方法
    function doJQueryAjaxLogin() {
        let username=$("#usernameId").val();
        let password=$("#passwordId").val();
        let url=`http://localhost/user/login/${username}/${password}`;//反单引号

        $.ajax({
            url:url,
            data:{action:"jQueryAjax"},
            type:"GET",
            success:function (data) {
                alert(data.message);
            },
            dataType:"json"
        });
    }
    function doAxiosAjaxLogin() {

    }
</script>
</html>